<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>轩昊科技</title>
    <link rel="stylesheet" href="./css/masterSwitch.css">
</head>

<body>
    <div id="app">

        <!--添加控制开关按钮 -->
        <el-button type="primary" v-cloak @click="addSwitchControl" class="addSwitchControl">添加控制开关</el-button>
        <span v-cloak style="color:#F56C6C;font-size: 12px;">鼠标位于某条信息上左键双击修改该信息，右键删除该信息</span>
        <!--添加控制开关表单 -->
        <el-dialog title="添加空气流控制开关" :visible.sync="addSwitchDialogIsShow" :close-on-click-modal="false" :close-on-press-escape="false"
            :show-close="false" center :lock-scroll="true" top="20px">
            <div style="height: 400px;overflow: auto;">
            <el-form :model="addAirFlowControlBean" style="padding:0px 10px 0px 10px">
                <el-form-item label="控制开关编号" :label-width="addSwitchDialogWidth">
                    <el-input v-model="addAirFlowControlBean.controlSwitchId" auto-complete="off" size="small" class="from-time-width"></el-input>
                </el-form-item>
                <el-form-item label="工作时间" :label-width="addSwitchDialogWidth" size="small" v-for="(timeInterval,index) in addAirFlowControlBean.temporalIntervalBeans"
                    :key="index">
                    <el-time-picker is-range v-model="addAirFlowControlBean.temporalIntervalBeans[index]" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" placeholder="选择时间范围" class="from-time-width">
                    </el-time-picker>
                    <el-button type="primary" icon="el-icon-plus" circle @click="addTemporalIntervalToAddAirFlowControlBean(index)"></el-button>
                    <el-button type="primary" icon="el-icon-delete" circle @click="delTemporalIntervalFromAddAirFlowControlBean(index)"></el-button>
                </el-form-item>
                <el-form-item label="关联设备" :label-width="addSwitchDialogWidth">
                    <el-select v-model="addAirFlowControlBean.equipmentBeans" multiple placeholder="请选择">
                        <el-option v-for="equiptment in optionalEquipments" :key="equiptment.id" :label="equiptment.equipmentName" :value="equiptment.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="流量计号" :label-width="addSwitchDialogWidth">
                    <el-select v-model="addAirFlowControlBean.flowmeteId" placeholder="请选择" clearable>
                        <el-option v-for="flowmete in optionalFlowmetes" :key="Number(flowmete.id)" :label="flowmete.no" :value="Number(flowmete.id)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电表编号" :label-width="addSwitchDialogWidth">
                    <el-select v-model="addAirFlowControlBean.electricityMeterId" placeholder="请选择" clearable>
                        <el-option v-for="electricity in optionalElectricities" :key="Number(electricity.id)" :label="electricity.no" :value="Number(electricity.id)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="自动打开/关闭" label-width="45%" style="text-align: left;">
                    <el-tooltip class="item" effect="dark" content="控制如果相关联的设备全部未工作，自动关闭控制开关" placement="right">
                        <el-switch style="display: inline-block; margin:0 auto" v-model="addAirFlowControlBean.autoOnAndOffSwitch" active-color="#13ce66"
                            inactive-color="#ff4949" active-text="打开" inactive-text="关闭"> </el-switch>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="打开/关闭开关" label-width="45%" style="text-align: left;">
                    <el-tooltip class="item" effect="dark" content="手动打开或者关闭控制开关" placement="right">
                        <el-switch style="display: inline-block; margin:0 auto" v-model="addAirFlowControlBean.mainSwitch" active-color="#13ce66"
                            inactive-color="#ff4949" active-text="打开" inactive-text="关闭">
                        </el-switch>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="是否手动操作" label-width="45%" style="text-align: left;">
                    <el-tooltip class="item" effect="dark" content="是否关闭程序自动控制总开关，选择手动操作" placement="right">
                        <el-switch style="display: inline-block; margin:0 auto" v-model="addAirFlowControlBean.handOperation" active-color="#13ce66"
                            inactive-color="#ff4949" active-text="打开" inactive-text="关闭">
                        </el-switch>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAddSwitchControl" v-cloak>取 消</el-button>
                <el-button type="primary" @click="submitAddSwitchControl" v-cloak :disabled="addButton">提交</el-button>
            </div>
        </el-dialog>

        <!-- 更新控制开关相关表单 -->
        <el-dialog title="修改空气流控制开关" :visible.sync="updateSwitchDialogIsShow" :close-on-click-modal="false" :close-on-press-escape="false"
            :show-close="false" center :lock-scroll="true" top="20px">
            <div style="height: 400px;overflow: auto;">
            <el-form :model="updateAirFlowControlBean" style="padding:0px 10px 0px 10px">
                <el-form-item label="控制开关编号" :label-width="updateSwitchDialogWidth">
                    <el-input v-model="updateAirFlowControlBean.controlSwitchId" auto-complete="off" size="small" class="from-time-width"></el-input>
                </el-form-item>
                <el-form-item label="工作时间" :label-width="updateSwitchDialogWidth" size="small" v-for="(timeInterval,index) in updateAirFlowControlBean.temporalIntervalBeans"
                    :key="index">
                    <el-time-picker is-range v-model="updateAirFlowControlBean.temporalIntervalBeans[index]" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" placeholder="选择时间范围" class="from-time-width">
                    </el-time-picker>
                    <el-button type="primary" icon="el-icon-plus" circle @click="addTemporalIntervalToUpdateAirFlowControlBean(index)"></el-button>
                    <el-button type="primary" icon="el-icon-delete" circle @click="delTemporalIntervalFromUpdateAirFlowControlBean(index)"></el-button>
                </el-form-item>

                <el-form-item label="关联设备" :label-width="updateSwitchDialogWidth">
                    <el-select v-model="updateAirFlowControlBean.equipmentBeans" multiple placeholder="请选择">
                        <el-option v-for="equiptment in optionalEquipments" :key="equiptment.id" :label="equiptment.equipmentName" :value="equiptment.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="流量计号" :label-width="updateSwitchDialogWidth">
                    <el-select v-model="updateAirFlowControlBean.flowmeteId" placeholder="请选择" clearable>
                        <el-option v-for="flowmete in optionalFlowmetes" :key="Number(flowmete.id)" :label="flowmete.no" :value="Number(flowmete.id)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电表编号" :label-width="updateSwitchDialogWidth">
                    <el-select v-model="updateAirFlowControlBean.electricityMeterId" placeholder="请选择" clearable>
                        <el-option v-for="electricity in optionalElectricities" :key="Number(electricity.id)" :label="electricity.no" :value="Number(electricity.id)">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="自动打开/关闭" label-width="45%" style="text-align: left;">
                    <el-tooltip class="item" effect="dark" content="控制如果相关联的设备全部未工作，自动关闭控制开关" placement="right">
                        <el-switch style="display: inline-block; margin:0 auto" v-model="updateAirFlowControlBean.autoOnAndOffSwitch" active-color="#13ce66"
                            inactive-color="#ff4949" active-text="打开" inactive-text="关闭">
                        </el-switch>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="手动打开/关闭" label-width="45%" style="text-align: left;">
                    <el-tooltip class="item" effect="dark" content="手动打开或者关闭控制开关" placement="right">
                        <el-switch style="display: inline-block; margin:0 auto" v-model="updateAirFlowControlBean.mainSwitch" active-color="#13ce66"
                            inactive-color="#ff4949" active-text="打开" inactive-text="关闭">
                        </el-switch>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="是否手动操作" label-width="45%" style="text-align: left;">
                    <el-tooltip class="item" effect="dark" content="是否关闭程序自动控制总开关，选择手动操作" placement="right">
                        <el-switch style="display: inline-block; margin:0 auto" v-model="updateAirFlowControlBean.handOperation" active-color="#13ce66"
                            inactive-color="#ff4949" active-text="打开" inactive-text="关闭">
                        </el-switch>
                    </el-tooltip>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelUpdateSwitchControl" v-cloak>取 消</el-button>
            <el-button type="primary" @click="submitUpdateSwitchControl" v-cloak :disabled="updateButton">更新</el-button>
        </div>
        </el-dialog>



        <!--显示所有控制开关的表格 -->
        <el-table :data="allControlSwitch" border style="width: 100%" :visible="true" @row-dblclick="updateSwitchControl" @row-contextmenu="toDelAirFlowControl">
            <el-table-column prop="controlSwitchId" label="控制开关编号" align="center"></el-table-column>
            <el-table-column prop="temporalIntervalBeans" label="工作时间" width="200" align="center">
                <template slot-scope="scope">
                    <el-time-picker size="mini" is-range :readonly="true" :value="timeInterval" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" placeholder="选择时间范围" v-for="(timeInterval,index) in scope.row.temporalIntervalBeans"
                        :key="index" class="auto-width"> </el-time-picker>
                </template>
            </el-table-column>
            <el-table-column prop="equipmentBeans" label="关联设备" align="center">
                <template slot-scope="scope">
                    <el-tag size="mini" v-for="equiptment in scope.row.equipmentBeans" :key="equiptment.id" v-text="equiptment.equipmentName">
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="flowmeteNo" label="流量计编号" align="center"></el-table-column>
            <el-table-column prop="electricityMeterNo" label="电表编号" align="center"></el-table-column>
            <el-table-column prop="autoOnAndOffSwitch" label="若关联设备都未工作是否关闭开关" align="center">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="控制如果相关联的设备全部未工作，自动关闭控制开关" placement="right">
                        <el-switch disabled style="display: inline-block; margin:0 auto" v-model="scope.row.autoOnAndOffSwitch" active-color="#13ce66"
                            inactive-color="#ff4949"> </el-switch>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="mainSwitch" label="手动关闭/打开" align="center">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="手动打开或者关闭控制开关" placement="right">
                        <el-switch disabled style="display: inline-block; margin:0 auto" v-model="scope.row.mainSwitch" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="handOperation" label="是否选择手动操作" align="center">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="手动打开或者关闭控制开关" placement="right">
                        <el-switch disabled style="display: inline-block; margin:0 auto" v-model="scope.row.handOperation" active-color="#13ce66"
                            inactive-color="#ff4949"> </el-switch>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>

        <!--分页组件 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="pagination.pageSizes"
            :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" class="center upward-separation">
        </el-pagination>
    </div>

</body>
<script src="../../myJs/importFile.js"></script>
<script>
    importFile(["../base.css", ]);
</script>
<script src="../utils/moduleUtil.js"></script>
<script src="./js/masterSwitchVue.js"></script>

</html>